<template>
  <div class="zhge">
    <div class="title">
      <h3>应用管理</h3>
      <div>
        <h4>APP下载(动态链接)</h4>
        <a :href="appurl" style="color: #0B9AC3; cursor: pointer;">点击这里,APP下载:{{appurl}}</a>
        <h5>或者扫一扫动态二维码下载</h5>
        <div style="padding:20px;">
          <div id="qrCode" ref="qrCodeDiv"></div>
        </div>
      </div>
      <div v-if="false">
        <h4>APP更新</h4>
        <el-button type="text" @click="dialogVisible = true">点击这里,为APP应用发布新的版本</el-button>
      </div>
    </div>
    <div v-if="false">
      <h4>一、打包教程</h4>
      <p>移动端app项目采用uni-app框架搭建，因此app的应用打包需要让前端技术人员进行以下操作。</p>
      <p>1)如下图所示，需要在 HBuilder X 软件中打开项目,找到根目录下 manifest.json 文件,进入配置视图。将版本更新改为更高版本,并且与上传更新资源时的版本号保持一致。</p>
      <img class="imagess" src="./images/jc-1.png" alt="网络不好" />
      <p>2)如下图所示，打包时需要点击 HBuilder X 编辑器的工具栏 ‘发行’→‘原生APP-云打包’出现以下界面。配置好然后打包...,然后控制台开始工作。</p>
      <img class="imagess" src="./images/jc-2.jpg" alt="网络不好" />
      <p>3)如下图所示，打包成功会在控制台打印下载地址，这时点击这个下载地址可以把这个APK文件下载下来。</p>
      <img class="imagess" src="./images/jc-3.jpg" alt="网络不好" />
    </div>
    <div v-if="false">
      <h4>二、更新教程</h4>
      <p>这一部分操作不需要技术,不懂前端也能操作</p>
      <p>1)衔接上一步‘打包教程’。你得到了一个XXX.apk的文件，然后在填写表单的时候,您填写的版本号和manifest.json版本号必须一致！*,然后把‘应用名称’和‘平台’都填全了，最后上传这个XXX.apk文件点击上传，这样就行了。</p>
      <p>2)打开你的APP,如图,你发现有更新的通知:</p>
      <img style="width:300px;" src="./images/jc-4.jpg" alt />
    </div>
    <!-- 弹窗 -->

    <el-dialog title="APP上传更新资源" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <uploadCom ref="tellChild" @transmitIndex="transmitIndex" />
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeDigFun">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import uploadCom from './uploadCom'
import QRCode from 'qrcodejs2'
import { uploadAppAdd } from '@/api/admin/user'
export default {
  components: {
    uploadCom,
  },
  data () {
    return {
      dialogVisible: false,
      //app下载地址
      appurl: '',
      qrcode: undefined,
    }
  },
  created () {
    uploadAppAdd().then((Response) => {
      console.log('*******************************', window.location.host)
      // 150.139.197.219
      console.log(Response.data.file)
      //this.appurl = `http://http://140.249.17.153:84:8765/${Response.data.file}`
      this.appurl = `http://${window.location.host == 'localhost:9529'
        ? '39.71.186.60:8766'
        : window.location.host
        }/${Response.data.file}`
      this.qrcode = new QRCode(this.$refs.qrCodeDiv, {
        text: this.appurl,
        width: 200,
        height: 200,
        colorDark: '#333333', //二维码颜色
        colorLight: '#ffffff', //二维码背景色
        correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
      })
      this.$nextTick
    })
  },
  methods: {
    //更新二维码
    transmitIndex (val) {
      uploadAppAdd().then((Response) => {
        console.log('**************gggg*****************')
        console.log(Response.data.file)
        this.appurl = `http://${window.location.host == 'localhost:9529'
          ? '39.71.186.60:8766'
          : window.location.host
          }/${Response.data.file}`
        this.qrcode.clear()
        this.qrcode.makeCode(this.appurl)
      })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => { })
    },
    //关闭弹窗
    closeDigFun () {
      console.log('关闭！！！！')

      this.$refs.tellChild.clearChildFun(true)
      this.dialogVisible = false
    },
  },
}
</script>
<style lang="scss" scoped>
.zhge {
  padding: 15px;
}
.imagess {
  max-width: 100%;
  height: auto;
}
.QR {
  width: 200px;
  height: 200px;
}
</style>
